<template>
  <el-card>
    <div style="display:flex;justify-content:space-between;align-items:center;">
      <h2>活动列表</h2>
      <el-button type="primary" @click="$router.push('/events/create')">新建活动</el-button>
    </div>
    <el-tabs v-model="activeType" @tab-click="onTabChange" style="margin-bottom: 20px;">
      <el-tab-pane label="全部" name="ALL" />
      <el-tab-pane label="讲座" name="LECTURE" />
      <el-tab-pane label="比赛" name="COMPETITION" />
      <el-tab-pane label="社团招新" name="CLUB_RECRUITMENT" />
    </el-tabs>
    <el-skeleton v-if="loading" :rows="4" animated />
    <el-empty v-else-if="events.length === 0" description="暂无活动" />
    <el-row v-else :gutter="20">
      <el-col :span="12" v-for="event in events" :key="event.eventId">
        <el-card class="event-card" @click="$router.push(`/events/${event.eventId}`)" shadow="hover">
          <h3>{{ event.title }}</h3>
          <div>描述：{{ event.description }}</div>
          <div>开始时间：{{ event.startTime }}</div>
          <div>最大人数：{{ event.maxParticipants }}</div>
          <div>类型：{{ eventTypeLabel(event.type) }}</div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { eventApi } from '../api/event'
import type { Event } from '../types/event'

const events = ref<Event[]>([])
const loading = ref(true)
const activeType = ref('ALL')

const eventTypeLabel = (type: string) => {
  switch(type) {
    case 'LECTURE': return '讲座'
    case 'COMPETITION': return '比赛'
    case 'CLUB_RECRUITMENT': return '社团招新'
    default: return type
  }
}

const fetchEvents = async () => {
  loading.value = true
  try {
    let res
    if (activeType.value === 'ALL') {
      res = await eventApi.getAllEvents()
    } else {
      res = await eventApi.getEventsByType(activeType.value)
    }
    events.value = res
  } finally {
    loading.value = false
  }
}

onMounted(fetchEvents)

const onTabChange = () => {
  fetchEvents()
}
</script>
<style scoped>
.event-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: box-shadow .2s;
}
</style> 